<template>
  <Box :title="detailTitle" class="flow-channel-detail" direction="row" >
    <!-- 摄像机  市界显示,省界隐藏 -->
    <Panel class="camera" second title="G2_K1000+900_南京方向" align="center">
      <Switch :list="[]"></Switch>
    </Panel>

    <!-- 流量统计 -->
    <FlowStatistical
      :todayTotal="todayTotal"
      :sameData="sameData"
      :typeArr="typeArr"
      :xDate="xDate"
      :seriesData="seriesData"
    ></FlowStatistical>

    <!-- 客货分析 -->
    <GuestVansAnalysis
      :pieChartData="pieChartData"
      :guestAccounted="guestAccounted"
      :vansAccounted="vansAccounted"
      :colorList="colorList"
      :titleShow="titleShow"
      :bottomShow="bottomShow"
    >
    </GuestVansAnalysis>

    <a-spin class="spin-loading" v-show="spinning" />
  </Box>
</template>

<script>
export default {
  name: 'FlowChannelDetail'
}
</script>
<script setup>
/**
 * @desc 跨江通道详情/重点路段流量详情(三级)
 * @auther 阳坤
 * @date 2022/10/24
 *
 **/

import Box from '../../components/detail/Box.vue'
import Panel from '../../components/panel'
import GuestVansAnalysis from '../../components/detail/GuestVansAnalysis.vue'
import FlowStatistical from '../../components/detail/FlowStatistical.vue'
import Switch from '../../components/detail/Switch.vue'
import flowApi from '../../api/flow.js'
import useMapOperates from '@/hooks/useMapOperates'
import { ref, watch, getCurrentInstance } from 'vue'

const props = defineProps({
  // 跨江通道/重点路段流量
  data: {
    type: Object,
    default: () => {}
  }
})
// 全局对象
const { proxy } = getCurrentInstance()
// 点位、弹框的处理
const handleDark = useMapOperates()

// loading
const spinning = ref(false)
// 详情标题
const detailTitle = ref()

// 今日累计流量
const todayTotal = ref()
// 同环比
const sameData = ref({})
// echarts 分类、x轴数据、折线数据
const typeArr = ref([
  { name: '向南', icon: 'rect' },
  { name: '向北', icon: 'rect' }
])
const xDate = ref()
const seriesData = ref([
  {
    name: '向南',
    gradientColor: [
      { offset: 0, color: 'rgb(183, 206, 250)' },
      { offset: 1, color: 'rgb(210, 229, 250)' }
    ],
    color: '#4287FE',
    data: []
  },
  {
    name: '向北',
    gradientColor: [
      { offset: 0, color: 'rgb(153, 203, 245)' },
      { offset: 1, color: 'rgb(203, 226, 249)' }
    ],
    color: '#00B5CA',
    data: []
  }
])

// 客货分析- 客车占比、货车占比以及饼图数据
const guestAccounted = ref()
const vansAccounted = ref()
const pieChartData = ref([])
const colorList = ref([])
// 控制客货分析- legend是否显示
const titleShow = ref(false)
const bottomShow = ref(false)

/**
 * 获取数据
 */
const getData = () => {
  spinning.value = true
  // 画线
  drawLine(props.data)
  if (props.data.showType == 'channel') {
    // 过江通道详情
    detailTitle.value = props.data.roadName
    titleShow.value = false
    bottomShow.value = true
    flowApi
      .getAcrossRiverChannelDetails(99999)
      .then(res => {
        if (res.data) {
          // 今日累计流量
          todayTotal.value = res.data.todayTotal
          // 同环比
          sameData.value = {
            ring: res.data.totalHb,
            same: res.data.totalTb
          }
          // echarts x轴数据、折线数据
          xDate.value = res.data.dateList
          seriesData.value[0].data = res.data.southList
          seriesData.value[1].data = res.data.northerList

          // 客货分析- 客车、货车值
          guestAccounted.value = ((res.data.kcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
          vansAccounted.value = ((res.data.hcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
          pieChartData.value = [
            { name: '向南货车', value: res.data.southHcTotal },
            { name: '向北货车', value: res.data.northerHcTotal },
            { name: '向北客车', value: res.data.northerKcTotal },
            { name: '向南客车', value: res.data.southKcTotal }
          ]
          colorList.value = ['#34d6e9', '#19bbce', '#266BF4', '#4287fe']
        }
      })
      .finally(() => {
        spinning.value = false
      })
  } else {
    // 重点路段详情
    detailTitle.value = props.data.roadName
    titleShow.value = true
    bottomShow.value = false
    flowApi
      .getImportRoadDetails(props.data.importRoadId)
      .then(res => {
        if (res.data) {
          // 今日累计流量
          todayTotal.value = res.data.todayTotal
          // 同环比
          sameData.value = {
            ring: res.data.totalHb,
            same: res.data.totalTb
          }
          // echarts x轴数据、折线数据
          typeArr.value = [
            { name: '出境', icon: 'rect' },
            { name: '入境', icon: 'rect' }
          ]
          xDate.value = res.data.date
          seriesData.value[0].data = res.data.exitList
          seriesData.value[0].name = '出境'
          seriesData.value[1].data = res.data.enterList
          seriesData.value[1].name = '入境'
          colorList.value = ['#19bbce', '#266BF4']

          // 客货分析- 客车、货车值
          guestAccounted.value = ((res.data.kcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
          vansAccounted.value = ((res.data.hcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
          pieChartData.value = [
            { name: '货车', value: res.data.hcTotal },
            { name: '客车', value: res.data.kcTotal }
          ]
        }
      })
      .finally(() => {
        setTimeout(() => {
          spinning.value = false
        }, 1000)
      })
  }
}

/**
 * 创建折线
 */
const drawLine = data => {
  const path = data.heatModelList.map(item => [item.lon, item.lat])
  const centerPath = path[Math.floor(path.length / 2)]
  const dataArr = [
    {
      name: data.roadName,
      path: path,
      config: {
        lineWidth: 8,
        lineColor: '#FCB42D',
        selectWidth: 10,
        selectColor: '#FCB42D'
      }
    }
  ]
  handleDark(
    'marker',
    [
      {
        icon: 'zhdd-gl-sxj',
        path: centerPath,
        name: '摄像头',
        hasClickStatus: true,
        offset: [-15, -35],
        size: [30, 35]
      }
    ],
    { type: 'sxj' }
  )
  handleDark('polyline', dataArr)

  proxy.$mapSdk().setMvMapCenterAndZoom([Number(centerPath[0]), Number(centerPath[1])], 13)
}

/**
 * 监听id变化
 */
watch(
  () => props.data.importRoadId,
  (newVal, oldVal) => {
    // 重新获取数据
    getData()
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow-channel-detail {
  .detail-box-content {
    justify-content: space-between;

    .camera {
      width: 30%;
    }

    .flow {
      // width: 38%;
      flex: 1;
      display: flex;
      flex-direction: column;

      .flow-statistical {
        display: flex;
        justify-content: space-between;

        .today-total {
          display: flex;

          .total {
            font-size: 26px;
            font-weight: 700;
            color: @primary-color;
            line-height: 22px;
          }
        }

        .unit {
          font-size: 14px;
          color: #333333;
          font-weight: 600;
          margin: 0 28px 0 5px;
        }

        .contrast {
          flex: 1;
          display: flex;
          align-items: center;

          .sequential-same {
            justify-content: flex-end;
          }
        }

        // }
      }

      .line-chart {
        flex: 1;
      }
    }
  }
}
</style>
